<template>
    <div>
        <h1>蛋糕分配1</h1>
        <div>
            <el-form label-width="150px" >
                <el-form-item label="蛋糕总大小：">
                    <el-input-number v-model="totalSum" :min="1" :max="1000" :step="50" @change="refreshData" ></el-input-number>
                </el-form-item>
                <template v-for="(person, index) in personArr">
                    <el-form-item :label="person.name + '：'" :key="index">
                        <el-input-number v-model="person.value" size="large" :min="1" :max="100" :step="10" @change="refreshData" ></el-input-number>
                        <el-button style="margin-left:20px;" icon="el-icon-delete" @click="delPerson(index)"></el-button>
                    </el-form-item>
                </template>

                <el-form-item>
                    <el-button  type="primary" @click="addPerson()">添加</el-button>
                </el-form-item>
            </el-form>
            <el-alert v-if="sum > totalSum"
                    title="总和和不能超过100"
                    type="error"
                    effect="dark">
            </el-alert>
        </div>
        <div style="height: 500px;text-align: left;" >
            <v-chart :option="option" :autoresize="true"/>
        </div>
    </div>
</template>

<script>
    import lodash from 'lodash'
    export default {
        name: "cake1",
        data() {
            return {
                totalSum: 100,
                firstNames: new Array(
                    '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '楮', '卫', '蒋', '沈', '韩', '杨',
                    '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜',
                    '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎',
                    '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '鲍', '史', '唐',
                    '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常',
                    '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄',
                    '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧',
                    '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁',
                    '杜', '阮', '蓝', '闽', '席', '季', '麻', '强', '贾', '路', '娄', '危', '江', '童', '颜', '郭',
                    '梅', '盛', '林', '刁', '锺', '徐', '丘', '骆', '高', '夏', '蔡', '田', '樊', '胡', '凌', '霍',
                    '虞', '万', '支', '柯', '昝', '管', '卢', '莫', '经', '房', '裘', '缪', '干', '解', '应', '宗',
                    '丁', '宣', '贲', '邓', '郁', '单', '杭', '洪', '包', '诸', '左', '石', '崔', '吉', '钮', '龚',
                    '程', '嵇', '邢', '滑', '裴', '陆', '荣', '翁', '荀', '羊', '於', '惠', '甄', '麹', '家', '封',
                    '芮', '羿', '储', '靳', '汲', '邴', '糜', '松', '井', '段', '富', '巫', '乌', '焦', '巴', '弓',
                    '牧', '隗', '山', '谷', '车', '侯', '宓', '蓬', '全', '郗', '班', '仰', '秋', '仲', '伊', '宫',
                    '宁', '仇', '栾', '暴', '甘', '斜', '厉', '戎', '祖', '武', '符', '刘', '景', '詹', '束', '龙',
                    '叶', '幸', '司', '韶', '郜', '黎', '蓟', '薄', '印', '宿', '白', '怀', '蒲', '邰', '从', '鄂',
                    '索', '咸', '籍', '赖', '卓', '蔺', '屠', '蒙', '池', '乔', '阴', '郁', '胥', '能', '苍', '双',
                    '闻', '莘', '党', '翟', '谭', '贡', '劳', '逄', '姬', '申', '扶', '堵', '冉', '宰', '郦', '雍',
                    '郤', '璩', '桑', '桂', '濮', '牛', '寿', '通', '边', '扈', '燕', '冀', '郏', '浦', '尚', '农',
                    '温', '别', '庄', '晏', '柴', '瞿', '阎', '充', '慕', '连', '茹', '习', '宦', '艾', '鱼', '容',
                    '向', '古', '易', '慎', '戈', '廖', '庾', '终', '暨', '居', '衡', '步', '都', '耿', '满', '弘',
                    '匡', '国', '文', '寇', '广', '禄', '阙', '东', '欧', '殳', '沃', '利', '蔚', '越', '夔', '隆',
                    '师', '巩', '厍', '聂', '晁', '勾', '敖', '融', '冷', '訾', '辛', '阚', '那', '简', '饶', '空',
                    '曾', '毋', '沙', '乜', '养', '鞠', '须', '丰', '巢', '关', '蒯', '相', '查', '后', '荆', '红',
                    '游', '竺', '权', '逑', '盖', '益', '桓', '公', '仉', '督', '晋', '楚', '阎', '法', '汝', '鄢',
                    '涂', '钦', '岳', '帅', '缑', '亢', '况', '后', '有', '琴', '归', '海', '墨', '哈', '谯', '笪',
                    '年', '爱', '阳', '佟', '商', '牟', '佘', '佴', '伯', '赏'
                ),
                personArr: [
                    {name: '小A', value: 10},
                    {name: '小B', value: 20},
                    {name: '小C', value: 30},
                    {name: '小D', value: 40},
                ],
                v1: null,
                option: {},
                OPTION_TEMPLATE: {
                    title: {
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '学生',
                            type: 'pie',
                            radius: '70%',
                            data: [

                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },
            }
        },
        methods: {
            addPerson() {
                let index = parseInt(Math.random() * this.firstNames.length);
                this.personArr.push({
                    name: '小' + this.firstNames[index],
                    value: 10,
                })
                this.firstNames.splice(index, 1)
                console.log('firstNames:', this.firstNames.length)
                this.refreshData()
            },
            delPerson(index) {
              this.personArr.splice(index, 1)
              this.refreshData()
            },
            refreshData() {
                let option = lodash.cloneDeep(this.OPTION_TEMPLATE)
                let sum = 0
                this.personArr.forEach(p => {
                    sum += p.value
                })
                if(sum <= this.totalSum) {
                    option.series[0].data = lodash.cloneDeep(this.personArr)

                    if(sum < this.totalSum) {
                        option.series[0].data.push({name: '未分配', value: this.totalSum - sum})
                    }
                }
                this.option = option
            }
        },
        computed: {
          sum() {
              let sum = 0
              this.personArr.forEach(p => {
                  sum += p.value
              })
              return sum
          }
        },
        mounted() {
            this.refreshData()
        }
    }
</script>

<style scoped>

</style>
